<template>
  <div class="classify-table">
    <div
      v-for="(data, index) in list"
      :key="data.id"
      class="item"
    >
      <div class="left">
        <div>{{index + 1}}</div>
      </div>
      <div class="right">
        <div class="title-wrap">
          <span class="title link">{{data.title}}</span>
        </div>
        <div class="bottom">
          <span class="answer">
            <i class="huobo huobo-answer"></i>
            {{data.answer}}
          </span>
          <span class="date">
            <i class="huobo huobo-date"></i>
            {{data.time}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClassifyTable',
  props: {
    list: {
      type: Array,
      default() {
        return [
          {
            id: 0, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 1, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 2, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 3, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 4, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 5, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 6, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 7, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 7, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 7, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          },
          {
            id: 7, title: '火博网是怎么做担保的？', answer: 0, time: '2016-05-10 12:34:56'
          }
        ];
      }
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .classify-table {
    padding: 0 1rem;
    border-top: 0;
    background-color: #fff;
    .item {
      display: flex;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px dashed #ddd;
      &:last-child {
        border-bottom: 0;
      }
      .left {
        flex: 0 0 4rem;
        div {
          width: 3.4rem;
          height: 3.4rem;
          line-height: 3.4rem;
          text-align: center;
          border-radius: 50%;
          background-color: @mainBgColor;
          font-size: 2rem;
          color: #fff;
        }
      }
      .right {
        flex: 1;
        .title-wrap {
          line-height: 3rem;
          font-size: 1.6rem;
        }
        .bottom {
          display: flex;
          align-items: center;
          color: #888;
          .answer {
            flex: 0 0 5rem;
          }
          .date {
            flex: 1;
            text-align: right;
          }
          .huobo {
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>
